<template>
  <!--  v-if="destroyOnClose?dialogVisible:true" -->
  <el-dialog :close-on-click-modal="closeOnClickModal" :custom-class="isFullscreen?'isFullscreen':''" :fullscreen="isFullscreen"
             destroy-on-close
             draggable
             :hiddenConfirm="true"
             :show-close="false"
             header
             v-bind="$attrs">
    <template #header="{ close, titleId, titleClass }" >
      <div class="my-header" style="padding: 3px 20px;height: 28px;text-align: center">
        <span>{{ props.title }}</span>
<!--        <el-button size="large" circle class="fullScreenBtn" link @click="handleFullScreen">-->
          <el-icon color="#409EFC" :size="15" class="fullScreenBtn" link @click="handleFullScreen">
            <FullScreen/>
          </el-icon>
<!--        </el-button>-->
<!--        <el-button size="large" circle class="closeBtn" link @click="close">-->
          <el-icon color="#409EFC" :size="15" class="closeBtn" link @click="close">
            <Close/>
          </el-icon>
<!--        </el-button>-->
      </div>
    </template>

    <div v-loading="apiLoading">
      <slot></slot>
    </div>

  </el-dialog>
</template>

<script lang="ts" setup>
import {defineEmits, onMounted, reactive, ref, toRefs, watch, computed, inject} from "vue";
import {FullScreen, Close} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import {useApiStore} from '@/stores/modules/apiStore/apiStore'
import {storeToRefs} from 'pinia';

const apiStore = useApiStore()
const {apiLoading} = storeToRefs(apiStore);

const emit = defineEmits(['update:dialogVisible', 'confirm'] as string[])
const router = useRouter()
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
  closeOnClickModal: {
    type: Boolean,
    default: false
  },
  destroyOnClose: {
    type: Boolean,
    default: true
  },
  hiddenConfirm: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  closeName: {
    type: String,
    default: '取消'
  },
  confirmName: {
    type: String,
    default: '确认'
  }
})
const {closeName, confirmName} = toRefs(props)
const data = reactive({
  isFullscreen: false,
})

const {isFullscreen} = toRefs(data);
// const { dialogVisible } = toRefs(props);

//全屏
const handleFullScreen = () => {
  data.isFullscreen = !data.isFullscreen
}

//关闭弹框
const handlerClose = () => {
  emit('close')
  emit('update:dialogVisible', false)
}

//关闭弹框
const confirm = () => {
  emit('confirm')
// await emit('update:dialogVisible', false)
}

</script>

<style lang="scss" scoped>
:deep(.el-dialog__header) {
  width: 100% !important;

}
.my-header{
  background-color: #e0e0e0;
  border-radius: 4px 4px 0 0;
  border-top: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
}
.el-dialog__footer {
  width: 100% !important;
  padding: 0 !important;
  height: 1000px;
}

.fullScreenBtn {
  position: absolute;
  top: 5px;
  right: 30px;

  color: #00d800;
  background-color: #00d800;
  padding: 2px;
  border-radius:50%;
  font-weight: 400;
  cursor: default;
}

.closeBtn {
  position: absolute;
  top: 5px;
  right: 5px;

  color: red;
  background-color: red;
  padding: 2px;
  border-radius:50%;
  font-weight: 400;
  cursor: default;
}
.closeBtn:hover,.fullScreenBtn:hover{
  color: #eae3d9;
}


.el-overlay {
  background: red;
}

.el-overlay-dialog {
  background: red;
}

.isFullscreen {
  .el-dialog__body {
    height: calc(100vh - 105px) !important;
  }

}


</style>
